<template>
  <div>
    <h4>登录</h4>
    <div v-show="showHint" class="hint_word">
      <p v-model="errHint">密码错误</p>
    </div>
    <div>
      <input class="sline" v-model="username" type="text" placeholder="请输入用户名"/>
      <input class="sline" v-model="password" type="password" placeholder="请输入密码"/>
      <button @click="login" class="sline bg-main">登录</button>
      <button @click="goRegister" class="sline bg-clear">没有账号，马上注册</button>
    </div>
  </div>
</template>

<script>
  import {setCookie,getCookie} from '@/assets/js/cookie.js'
  export default {
    mounted(){
      console.log('mounted...')
      if (getCookie('username')){
        this.$router.push('/')
      }
    },
    data(){
      return {
        username: '',
        password: '',
        showHint: false,
        errHint: '密码错误'
      }
    },
    methods: {
      login: function () {
        if(this.username == "" || this.password == ""){
          alert("请输入用户名或密码")
        } else {
          var data = {'username':this.username,'pwd':this.password}
          this.$http.post('http://localhost/xunfei/xf_service/login.php',data).then(res => {
            this.showHint = true;
            this.errHint = res.data.message
            if (res.data.code >= 0){
              setCookie('username', this.username, 1000*60)
              setTimeout(function () {
                this.$router.push('/')
              }.bind(this), 1000)
            }
          })
        }
      },
      goRegister: function () {
        this.$router.push('/register')
      }
    }
  }
</script>

<style scoped>
  .hint_word {
    color: red;
    font-size: 10px;
  }

  .sline {
    display: block;
    margin: 10px auto;
    width: 200px;
    height: 30px;
  }

  .bg-clear{
    border: none;
    background: none;
  }

  .bg-main {
    background: mediumseagreen;
    color: white;
    padding: 5px;
    border: none;
  }
</style>
